<script setup>
import { ref, toRaw } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Type from '@components/search/type'
import Search from '@components/search/index'
import { common, service } from '@utils'
import { usePremission, useRole } from '@hooks'

const searchs = ref([
    {
        type: Type.SELECT,
        key: 'path',
        placeholder: '服务实例',
        valueKey: 'val',
        data: [],
        width: 6,
    },
    {
        width: 6,
        type: Type.SEARCH_BUTTON
    }
])

const data = ref()

let queryForm = {}

const onSearch = (param) => {
    queryForm = param
    getData()
}

const getData = async () => {
    if (!queryForm.path) return
    const res = await service.monitor.monitor(queryForm.path)
    data.value = res
}

const getServices = async () => {
    const res = await service.sys.dictionaryAll('service')
    searchs.value[0].data = res
}

getServices()
</script>
    <template>
    <section class="main-white">
        <search :items="searchs" @filter="onSearch" />
        {{data}}
    </section>
</template>